<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>报表列表</title>
    <link rel="stylesheet" href="/css/vivo.css">
    <link rel="stylesheet" href="/vivo/layui/css/layui.css">

    <style type="text/css">
    .mb15{
        margin-bottom:15px
    }
    #breadcrumb{
        float:left;
    }
    .title{
        padding: 15px 0;
        text-align:center;
    }
    </style>

</head>

<body class="layui-layout-admin">
<div style="padding:15px" >
    <ul id="breadcrumb">
        <li><a onclick="javascript:history.back(-1)"><span class="icon icon-home"><img src="/images/icons/64/home.png" width="28"/>  </span>返回</a>
        </li>
        <li></li>
    </ul>
    <h2 th:text="'报表名称：'+${template.templateName}" class="title"></h2>
    <div class="search-box layui-form layui-form-pane" lay-filter="formData">
        <div class="layui-inline mb15" >
            <label class="layui-form-label">客户编码</label>
            <div class="layui-input-inline" >
                <input type="text" name="cCusCode" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline mb15" >
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline" >
                <input type="text" name="cCusName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline mb15">
            <label class="layui-form-label">所属公司</label>
            <div class="layui-input-inline" >
                <input type="text" name="comCode" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline mb15">
            <label class="layui-form-label">医院等级</label>
            <div class="layui-input-inline" >
                <input type="text" name="HospitalType" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline mb15">
            <label class="layui-form-label">客户分类</label>
            <div class="layui-input-inline" >
                <input type="text" name="CustTYPE" autocomplete="off" class="layui-input">
            </div>
        </div>
        <button lay-submit lay-filter="search" class=" layui-btn layui-btn-normal mb15">查询</button>
        <a  onclick="downLoad()"   class="layui-btn layui-btn-primary mb15"><i class="layui-icon layui-icon-download-circle"></i>  下载报表</a></span>
    </div>
    <table id="list" lay-filter="list"></table>
</div>
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<script src="/vivo/layui/layui.js"></script>
<script th:inline="javascript">
let form;
let fieldList = [[${fieldList}]]
let template = [[${template}]]
let tableFields = [{field: 'id',type:'numbers', title: '编号', width:80}]
fieldList.forEach(function(item){
    let obj = {}
    obj.field = item.fieldName
    obj.title = item.fieldNameCn
    obj.minWidth = 160
        tableFields.push(obj)
})
console.log(tableFields)
layui.use(['table','form'], function(){
  var table = layui.table;
  form = layui.form;

  //第一个实例
  table.render({
    elem: '#list'
    ,id:'idTest'
    ,height: 'full-250'
    ,url: ''
    ,page: true //开启分页
    ,limit: 25
    ,limits:[15,25,50,75,100]
    ,cols:
    [
        tableFields
    ],
    data:[]
  });
  form.on('submit(search)', function(data){
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      table.reload('idTest',{
          url:'/customer/findSerach',
          where: data.field
          ,page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
});
//下载
function downLoad(){
    //获取表单区域所有值
    var data = form.val("formData");
    var url="/report/excalDownLoad/"+template.id+"_"+data.cCusCode+"_"+data.cCusName+"_"+data.comCode+"_"+data.HospitalType+"_"+data.CustTYPE;
	//location.href=url;
	window.open(url)
}
</script>


</body>
</html>
